<template>
    <transition name="slide-fade">
        <div style="text-align: center;margin: auto;">
            <div class="article_detail_img">
                <div style="color: white;padding-top: 8vw;font-weight: 600;">
                    <h1 style="margin-bottom: 0">{{article.title}}</h1>
                    <div style="opacity: 0.9;text-shadow: 2px 2px 2px  black;">
                        <svg t="1615965375733" style="vertical-align: bottom;margin-right: 2px" viewBox="0 0 1024 1024"
                             version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2836" width="19" height="19">
                            <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 64C311.701333 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333z m0 394.666667a32 32 0 0 1-32-32V256a32 32 0 0 1 64 0l-0.021333 224H746.666667a32 32 0 0 1 0 64H512z"
                                  fill="#e6e6e6" p-id="2837"></path>
                        </svg>
                        <p style=" display: inline;"> 发表于&nbsp; {{article.created_at |capitalize }} </p>

                        <svg t="1616384455659" class="icon"
                             style="vertical-align: bottom;margin-right: 2px;margin-left: 13px" viewBox="0 0 1024 1024"
                             version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2184" width="19" height="19">
                            <path d="M887.4 410.6l-61.8 16.6c30.3 112.7-2.1 233.9-84.5 316.3-127.5 127.5-334.8 127.5-462.3 0-61.7-61.7-95.7-143.8-95.7-231.1 0-87.3 34-169.4 95.7-231.1 82.4-82.4 203.5-114.8 316.2-84.5L580.4 251l147.4-52.6L626.5 79.2l-14.9 55.7c-65.1-17.5-134.1-17.8-199.4-1-67.4 17.4-129.1 52.7-178.6 102.1-37.3 37.3-66.2 80.8-85.9 129.3-19 46.8-28.6 96.3-28.6 147.1s9.6 100.2 28.6 147.1c19.7 48.5 48.6 92 85.9 129.3 37.3 37.3 80.8 66.2 129.3 85.9 46.8 19 96.3 28.6 147.1 28.6s100.2-9.6 147.1-28.6c48.5-19.7 92-48.6 129.3-85.9 49.4-49.4 84.8-111.2 102.1-178.6 16.8-65.4 16.4-134.4-1.1-199.6z"
                                  p-id="2185" fill="#e6e6e6"></path>
                        </svg>
                        <p style=" display: inline;"> 更新于&nbsp; {{article.updated_at |capitalize }}</p>
                        <svg t="1615966823033" style="vertical-align: middle;margin:auto 5px auto 20px"
                             viewBox="0 0 1764 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2095" width="16" height="16">
                            <path d="M756.474311 818.665244C749.078756 818.665244 741.512533 817.243022 734.230756 814.114133 617.551644 764.563911 542.060089 650.331022 542.060089 523.184356 542.060089 348.990578 683.3152 207.280356 856.940089 207.280356 1030.508089 207.280356 1171.706311 348.990578 1171.706311 523.184356 1171.706311 648.3968 1099.855644 762.345244 988.580978 813.431467 959.965867 826.5728 926.173867 814.057244 913.089422 785.499022 900.004978 756.997689 912.520533 723.205689 941.078756 710.064356 1012.076089 677.467022 1057.928533 604.137244 1057.928533 523.184356 1057.928533 411.739022 967.759644 321.058133 856.940089 321.058133 746.063644 321.058133 655.837867 411.739022 655.837867 523.184356 655.837867 604.592356 704.079644 677.694578 778.774756 709.438578 807.674311 721.726578 821.156978 755.120356 808.868978 784.019911 799.652978 805.637689 778.604089 818.665244 756.474311 818.665244"
                                  p-id="2096" fill="#e6e6e6"></path>
                            <path d="M857.8048 1012.775822C498.8928 1012.775822 196.073244 765.991822 47.479467 618.877156 16.873244 588.555378-0.022756 548.619378-0.022756 506.407822-0.022756 464.139378 16.873244 424.203378 47.479467 393.8816 196.073244 246.766933 498.8928-0.017067 857.8048-0.017067 1216.7168-0.017067 1519.536356 246.766933 1668.073244 393.8816 1698.679467 424.203378 1715.575467 464.139378 1715.575467 506.407822 1715.575467 548.619378 1698.679467 588.555378 1668.073244 618.877156 1640.425244 646.2976 1615.963022 670.020267 1574.434133 704.950044 1550.370133 725.1456 1514.473244 722.0736 1494.277689 698.0096 1474.082133 673.9456 1477.154133 638.048711 1501.218133 617.853156 1539.561244 585.597156 1561.349689 564.434489 1588.030578 538.038044 1596.905244 529.220267 1601.797689 518.013156 1601.797689 506.407822 1601.797689 494.802489 1596.905244 483.538489 1588.030578 474.7776 1478.405689 366.2336 1187.874133 113.760711 857.8048 113.760711 527.735467 113.760711 237.147022 366.2336 127.579022 474.7776 118.704356 483.538489 113.755022 494.802489 113.755022 506.407822 113.755022 518.013156 118.704356 529.220267 127.579022 537.981156 237.147022 646.582044 527.735467 898.998044 857.8048 898.998044 1027.618133 898.998044 1176.155022 849.5616 1339.369244 738.742044 1365.424356 720.992711 1400.809244 727.819378 1418.387911 753.8176 1436.080356 779.815822 1429.310578 815.143822 1403.312356 832.836267 1222.576356 955.602489 1049.179022 1012.775822 857.8048 1012.775822"
                                  p-id="2097" fill="#e6e6e6"></path>
                        </svg>
                        <div style="display: inline;">阅读： {{article.read_times}}</div>
                    </div>
                </div>
                <Snow style="position: absolute;top:0px "></Snow>
            </div>


            <div class="detail_content">
                <div class="panel_article_detail" style="min-height: 100px;">
                    <div v-html="article.content" style="margin:2vw;" v-highlight></div>
                    <div class="ui horizontal divider " style="color: gray;width:98%;margin: auto">
                        END
                    </div>

                    <div style="text-align: left;padding:15px;margin:15px;font-weight: 600;background-color: #fafafa">

                        <div style="margin: 6px">
                            <template v-if="article.author=='Luo'">
                                作者：
                            </template>
                            <template v-else>
                                本文转载/修改于：
                            </template>
                            {{article.author}}
                        </div>
                        <div style="margin: 6px">
                            <template v-if="article.author=='Luo'">
                                本文链接：<a target="_blank">{{this.domain()}}{{this.$route.path}}</a>
                            </template>
                            <template v-else>
                                原文链接：<a :href="article.href_orgin" target="_blank">{{article.href_orgin}}</a>
                            </template>

                        </div>
                        <div style="margin:20px 6px">
                            <span> 类/标签：</span>
                            <template v-for="(label,index) in  separate(article.label)">
                                <a class="ui label" :class="colorRandom()" @click="labelTo(label,index)" :key="index">
                                    <i class="tag icon"></i> {{label}}
                                </a>
                            </template>
                        </div>
                    </div>

                    <div style="padding:15px;margin:15px;font-weight: 600;">
                        <div class="ui three cards">
                            <div class="card recommend" v-for="(art,index) in recommendArt" @click="toArticle(art.id)"
                                 :key="index">
                                <div class="image" v-if="!art.img">
                                    <img :src='randomNum(6,20)' class="img"/>
                                </div>
                                <div class="image" v-else>
                                    <img :src="art.img" class="img">
                                </div>
                                <div class="extra">
                                    {{art.title}}
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <FooterForMain></FooterForMain>

            </div>

        </div>
    </transition>
</template>

<script>
    import Snow from "../../components/Snow";
    import FooterForMain from "../../components/FooterForMain";



    export default {
        name: "Article",
        props: ['articleId'],
        data() {
            return {
                article: '',
                scrollY: 0,
                recommendArt: []
            }
        },

        components: {
            Snow,
            FooterForMain
        },

        created() {
            this.getArticle();
            this.getRecommend();
        },
        watch: {
            $route(to, from) {
                this.getArticle()
            }
        },
        methods: {
            getRecommend() {
                this.req.get('recommend/' + this.articleId)
                    .then(res => {
                        this.recommendArt = res.data;
                    })
                    .catch(error => {
                        console.log('getRecommend() error' + error);
                    })
            },

            getArticle() {
                window.scrollTo(0, 0);

                this.req({
                    url: 'article',
                    method: 'post',
                    data: {id: this.articleId}
                })
                    .then(res => {
                        this.article = res.data;
                        document.title = this.article.title;
                        document.querySelector('meta[name="keywords"]').setAttribute('content', this.article.label + ',' + this.article.title);
                        document.querySelector('meta[name="description"]').setAttribute('content', this.article.introduction);

                        this.addReadTime()
                        this.$store.commit('negate');
                    })
                    .catch(error => {
                        document.title = "Error获取错误了";
                        console.log('getArticle()一不小心就出错了呀' + error);
                        this.$store.commit('negate');
                    })

            },

            separate: function (value) {
                if (!value) {
                    return false;
                }
                return value.toString().split(',');
            },

            numRandom(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },

            colorRandom() {
                let labelColor = [
                    'red',
                    'orange',
                    'yellow',
                    'olive',
                    'green',
                    'teal',
                    'blue',
                    'violet',
                    'purple',
                    'pink',
                    'brown',
                    'grey',
                    'black'
                ];

                return labelColor[Math.floor(Math.random() * 10)];
            },

            labelTo(lab, index) {
                this.$router.push({name: 'classify', params: {sortName: lab, labelId: index}});
            },

            addReadTime() {
                this.req.get('/addRead/' + this.article.id)
                    .then(res => {
                        if (res) console.log('add read times success.');
                    })
                    .catch(error => {
                        console.log('addReadTime() error' + error);
                    })
            },

            domain() {
                return window.location.host;
            },
            randomNum(min, max) {
                return require('@/assets/img/' + Math.floor(Math.random() * (max - min) + min) + '.jpg');
            },


            toArticle(artId) {
                this.$router.push({name: 'article', params: {articleId: artId}});
            }
        },
        filters: {
            capitalize: function (value) {
                if (value) {
                    return /\d{4}-\d{1,2}-\d{1,2}/g.exec(value)[0]; //将日期过滤，只输出年月日
                }
            }
        }

    }
</script>
<style>
    .language-php{
        border-radius: .4vw!important;
    }
</style>

<style lang="scss" scoped>
    .article_detail_img {
        width: 100%;
        height: 26vw;
        background: url("../../assets/img/5.jpg") bottom skyblue;
        background-size: cover;

    }

    .detail_content {
        margin-top: -15vh;
    }

    .panel_article_detail {
        background-color: white;
        padding-top: 20px;
        width: 60vw;
        margin: auto;
        border-radius: 0.5vw;
        text-align: left;
        box-shadow: 3px 2px 17px rgba(0, 0, 0, .3);
    }

    .recommend {
        cursor: pointer;

        &:hover {
            .extra {
                color: black !important;
            }

            box-shadow: 0px 0px 8px rgba(0, 0, 0, .5);
        }
    }

    .extra {
        color: rgba(0, 0, 0, .7) !important;
    }

    .extra:hover {
        color: black !important;
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }


</style>
